import React, { Component } from 'react';
import Modal from 'antd-mobile/lib/modal';
import Checkbox from 'antd-mobile/lib/checkbox'
import Stepper from 'antd-mobile/lib/stepper'
import showPresentList from 'shared/components/PresentList';

const alert = Modal.alert;

class CartItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      stepperIsReadOnly: false
    }
  }

  componentWillReceiveProps() {
    this.setState({ stepperIsReadOnly: false });
  }

  toDetail(id) {
    __self.history.push(`/ProductDetail/${id}/buyProductDetail`)
  }

  render() {
    const { data, numChange, wishCtrl, del, careCheckedChange } = this.props;
    const { presentlist } = data;
    return (
      <div className="cart-main-list-item">
        <Checkbox checked={data.selected} onChange={()=>careCheckedChange(data.selected,data.product_id)} />
        <div className="main">
          <div className="main-imgbox" onClick={()=>this.toDetail(data.product_id)}>
            <img src={data.image} alt="" />
          </div>
          <div className="main-info">
            <div className="text" onClick={() => this.toDetail(data.product_id)}><span>佳能</span>（Canon）{data.title}  </div>
            {
              !!presentlist.length &&
              <div className="presentlist">
                <div>【赠品】{presentlist[0].title}</div>
                {
                  presentlist.length > 1 ?
                    <div onClick={()=>showPresentList(presentlist)}>显示全部</div>
                    :
                    <div>x1</div>
                }
              </div>
            }
            <div className="main-info-ctrl">
              <div className="price">￥{(+data.price).toFixed(2)}</div>
              <div className="ctrl-main" onClick={()=>{}}>
                <Stepper
                  showNumber
                  readOnly={this.state.stepperIsReadOnly}
                  min={1}
                  value={data.quantity}
                  onChange={(val) => {
                    this.setState({ stepperIsReadOnly: true })
                    numChange(val, data.quantity, data.product_id)
                  }}
                />
                <div className="ctrl-rm">
                  <span onClick={()=>wishCtrl(data.isspecialproduct,data.product_id)}>{data.isspecialproduct ? '取消' : '移入'}关注 </span>|
                  <span onClick={()=>
                    alert(null, '确定删除嘛 ? ', [
                      { text: '取消', onPress: () => {} },
                      { text: '确定', onPress: ()=>del(data.product_id) },
                    ])
                  }
                  > 删除
                  </span>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default CartItem;
